<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%--
    <link href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/layui/css/layui.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/jquery/jquery-3.3.1.js"></script>
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.js"></script>
--%>
    <nav class="navbar navbar-expand-lg navbar-dark layui-bg-red">
        <a class="navbar-brand" href="${pageContext.request.contextPath}/index.jsp"><i class="layui-icon layui-icon-app"></i> 果果商城</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="${pageContext.request.contextPath}/index.jsp" id="home">首页 <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#" id="blog">商品分类</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#" id="article">热销商品</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="${pageContext.request.contextPath}/user/userCenter" id="drafts">个人中心</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="${pageContext.request.contextPath}/order/myOrder?username=${loginUser.username}" id="dustbin">我的订单</a>
                </li>
                <c:choose>
                    <c:when test="${loginUser.roleId != 3 && loginUser.roleId != null}">
                        <li class="nav-item">
                            <a class="nav-link" href="${pageContext.request.contextPath}/user/admin" id="admin">管理后台</a>
                        </li>
                    </c:when>
                </c:choose>
            </ul>
            <c:choose>
                <c:when test="${loginUser != null}">
                    <ul class="navbar-nav mr-5">
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-expanded="false">
                                    <span id="headerImg">
                                        <img id="head" src="${pageContext.request.contextPath}/images/${loginUser.headerImg}" alt="#" width="30px" height="30px" style="border-radius: 50%;margin-right: 5px">
                                    </span>
                                <i class="layui-icon layui-icon-username">
                                    <script>
                                        $.ajax({
                                            url:'${pageContext.request.contextPath}/role/selectOne?id=${loginUser.roleId}',
                                            success:function (data) {
                                                $('#role').text(data.roleName);
                                            }
                                        });
                                    </script>
                                    <span id="role"></span>
                                    【
                                    <span id="nick">${loginUser.name}</span>
                                    】
                                </i>
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="${pageContext.request.contextPath}/user/userCenter">个人信息</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="javascript:;" onclick="logout()">注销</a>
                            </div>
                        </li>
                    </ul>
                </c:when>
                <c:otherwise>
                    <ul class="navbar-nav mr-5">
                        <li class="nav-item">
                            <a class="nav-link" href="${pageContext.request.contextPath}/login" id="login">登录</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="${pageContext.request.contextPath}/register" id="register">注册</a>
                        </li>
                    </ul>
                </c:otherwise>
            </c:choose>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="搜索" aria-label="Search">
                <button class="btn layui-bg-blue my-2 my-sm-0" type="submit">搜索</button>
            </form>
        </div>
    </nav>
    <script>
        function logout() {
            $.ajax({
                url:'${pageContext.request.contextPath}/user/logout',
                dataType:'json',
                success:function (data) {
                    if (data.code === 0){
                        location.href = "${pageContext.request.contextPath}/index.jsp";
                    }
                }
            });
        }
    </script>